<template>
  <a-row :gutter="24">
    <a-col :sm="24" :md="24" :xl="24">
      <div class="send-display-container">
        <div class="filter-container">
          <template>
            <div>
              <a-button type="primary" @click="showModal">
                新增菜单
              </a-button>
              <a-modal
                v-if="DetailsVisible"
                style="width: 50%"
                title="菜单信息"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="handleOk"
                @cancel="handleCancel"
              >
                <div style="margin-top: 12px;min-height: 300px;min-width: 650px">
                  <a-form-model
                    ref="ruleAddForm"
                    :model="addForm"
                    :rules="addRules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                  >
                    <a-form-model-item ref="menuName" label="菜单名称" prop="menuName" :style="itemStyle">
                      <a-input
                        :disabled="disableSubmit"
                        v-model="addForm.menuName"
                        @blur="() => { $refs.menuName.onFieldBlur() }"></a-input>
                    </a-form-model-item>
                    <a-form-model-item ref="url" label="菜单路径" prop="url" :style="itemStyle">
                      <a-input
                        :disabled="disableSubmit"
                        v-model="addForm.url"
                        @blur="() => { $refs.url.onFieldBlur() }"></a-input>
                    </a-form-model-item>
                    <a-form-model-item ref="component" label="前端组件" prop="component" :style="itemStyle">
                      <a-input
                        :disabled="disableSubmit"
                        v-model="addForm.component"
                        @blur="() => { $refs.component.onFieldBlur() }"></a-input>
                    </a-form-model-item>
                    <a-form-model-item ref="name" label="唯一标识" prop="name" :style="itemStyle">
                      <a-input
                        :disabled="disableSubmit"
                        v-model="addForm.name"
                        @blur="() => { $refs.name.onFieldBlur() }"></a-input>
                    </a-form-model-item>
                    <a-form-model-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      :style="itemStyle"
                      label="菜单图标"
                      ref="icon"
                      prop="icon">
                      <a-input placeholder="点击选择图标" v-model="addForm.icon" :disabled="disableSubmit">
                        <a-icon slot="addonAfter" type="setting" @click="selectIcons" />
                      </a-input>
                    </a-form-model-item>
                    <a-form-model-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      ref="target"
                      label="链接位置"
                      prop="target"
                      :style="itemStyle">
                      <a-select v-model="addForm.target" placeholder="请选择位置" :disabled="disableSubmit">
                        <a-select-option value="_blank">_blank</a-select-option>
                        <a-select-option value="_self">_self</a-select-option>
                        <a-select-option value="_parent">_parent</a-select-option>
                        <a-select-option value="_top">_top</a-select-option>
                        <a-select-option value="framename">framename</a-select-option>
                      </a-select>
                    </a-form-model-item>
                    <a-form-model-item
                      label="上级菜单"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      :hasFeedback="true"
                      :style="itemStyle"
                    >
                      <a-tree-select
                        style="width:100%"
                        :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
                        :treeData="dataSource"
                        v-model="addForm.parentId"
                        placeholder="请选择父级菜单"
                        :disabled="disableSubmit">
                      </a-tree-select>
                    </a-form-model-item>
                    <a-form-model-item label="权重" prop="weight" :style="itemStyle">
                      <a-input :disabled="disableSubmit" v-model="addForm.weight" type="text" oninput="value=value.replace(/[^\d]/g,'')"/>
                    </a-form-model-item>
                    <a-form-model-item label="备注" prop="bz" :style="itemStyle">
                      <a-input :disabled="disableSubmit" v-model="addForm.bz" type="text"/>
                    </a-form-model-item>
                    <a-form-model-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      ref="isValid"
                      label="是否显示"
                      prop="isValid"
                      :style="itemStyle">
                      <a-select v-model="addForm.isValid" placeholder="请选择是否显示" :disabled="disableSubmit">
                        <a-select-option value="1">是</a-select-option>
                        <a-select-option value="0">否</a-select-option>
                      </a-select>
                    </a-form-model-item>
                    <!-- 选择图标 -->
                    <icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
                  </a-form-model>
                </div>
              </a-modal>
              <a-modal
                v-else
                style="width: 50%"
                title="菜单信息"
                :visible="visible"
                :confirm-loading="confirmLoading"
              >
                <div style="margin-top: 12px;min-height: 300px;min-width: 650px">
                  <a-form-model
                    ref="ruleAddForm"
                    :model="addForm"
                    :rules="addRules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                  >
                    <a-form-model-item ref="menuName" label="菜单名称" prop="menuName" :style="itemStyle">
                      <a-input
                        :disabled="disableSubmit"
                        v-model="addForm.menuName"
                        @blur="() => { $refs.menuName.onFieldBlur() }"></a-input>
                    </a-form-model-item>
                    <a-form-model-item ref="url" label="菜单路径" prop="url" :style="itemStyle">
                      <a-input
                        :disabled="disableSubmit"
                        v-model="addForm.url"
                        @blur="() => { $refs.url.onFieldBlur() }"></a-input>
                    </a-form-model-item>
                    <a-form-model-item ref="component" label="前端组件" prop="component" :style="itemStyle">
                      <a-input
                        :disabled="disableSubmit"
                        v-model="addForm.component"
                        @blur="() => { $refs.component.onFieldBlur() }"></a-input>
                    </a-form-model-item>
                    <a-form-model-item ref="name" label="唯一标识" prop="name" :style="itemStyle">
                      <a-input
                        :disabled="disableSubmit"
                        v-model="addForm.name"
                        @blur="() => { $refs.name.onFieldBlur() }"></a-input>
                    </a-form-model-item>
                    <a-form-model-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      :style="itemStyle"
                      label="菜单图标"
                      ref="icon"
                      prop="icon">
                      <a-input placeholder="点击选择图标" v-model="addForm.icon" :disabled="disableSubmit">
                        <a-icon slot="addonAfter" type="setting" @click="selectIcons" />
                      </a-input>
                    </a-form-model-item>
                    <a-form-model-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      ref="target"
                      label="链接位置"
                      prop="target"
                      :style="itemStyle">
                      <a-select v-model="addForm.target" placeholder="请选择位置" :disabled="disableSubmit">
                        <a-select-option value="_blank">_blank</a-select-option>
                        <a-select-option value="_self">_self</a-select-option>
                        <a-select-option value="_parent">_parent</a-select-option>
                        <a-select-option value="_top">_top</a-select-option>
                        <a-select-option value="framename">framename</a-select-option>
                      </a-select>
                    </a-form-model-item>
                    <a-form-model-item
                      label="上级菜单"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      :hasFeedback="true"
                      :style="itemStyle"
                    >
                      <a-tree-select
                        style="width:100%"
                        :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
                        :treeData="dataSource"
                        v-model="addForm.parentId"
                        placeholder="请选择父级菜单"
                        :disabled="disableSubmit">
                      </a-tree-select>
                    </a-form-model-item>
                    <a-form-model-item label="权重" prop="weight" :style="itemStyle">
                      <a-input :disabled="disableSubmit" v-model="addForm.weight" type="text" oninput="value=value.replace(/[^\d]/g,'')"/>
                    </a-form-model-item>
                    <a-form-model-item label="备注" prop="bz" :style="itemStyle">
                      <a-input :disabled="disableSubmit" v-model="addForm.bz" type="text"/>
                    </a-form-model-item>
                    <a-form-model-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      ref="isValid"
                      label="是否显示"
                      prop="isValid"
                      :style="itemStyle">
                      <a-select v-model="addForm.isValid" placeholder="请选择是否显示" :disabled="disableSubmit">
                        <a-select-option value="1">是</a-select-option>
                        <a-select-option value="0">否</a-select-option>
                      </a-select>
                    </a-form-model-item>
                    <!-- 选择图标 -->
                    <icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
                  </a-form-model>
                </div>
                <template slot="footer">
                  <a-button key="back" @click="handleCancel">
                    关闭
                  </a-button>
                </template>
              </a-modal>
            </div>
          </template>
        </div>

        <a-back-top/>
        <div>
          <template>
            <a-table
              :columns="columns"
              :data-source="dataSource"
              bordered
              :loading="loading"
              :pagination="false"
              :rowKey="(record)=>{return record.label}"
            >
              <span slot="action" slot-scope="text, record">
                <a @click="handleEdit(record)">编辑</a>
                <a-divider type="vertical"/>
                <a-dropdown>
                  <a class="ant-dropdown-link">
                    更多 <a-icon type="down"/>
                  </a>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a href="javascript:;" @click="handleDetail(record)">详情</a>
                      <a-drawer
                        title="菜单信息"
                        width="30%"
                        :visible="menuVisible"
                        :body-style="{ paddingBottom: '80px' }"
                        @close="onClose"
                      >
                        <div >
                          <a-form-model
                            ref="ruleAddForm"
                            :model="addForm"
                            :rules="addRules"
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol"
                          >
                            <a-form-model-item ref="menuName" label="菜单名称" prop="menuName" >
                              <a-input
                                :disabled="disableSubmit"
                                v-model="addForm.menuName"
                                @blur="() => { $refs.menuName.onFieldBlur() }"></a-input>
                            </a-form-model-item>
                            <a-form-model-item ref="url" label="菜单路径" prop="url" >
                              <a-input
                                :disabled="disableSubmit"
                                v-model="addForm.url"
                                @blur="() => { $refs.url.onFieldBlur() }"></a-input>
                            </a-form-model-item>
                            <a-form-model-item ref="component" label="前端组件" prop="component" >
                              <a-input
                                :disabled="disableSubmit"
                                v-model="addForm.component"
                                @blur="() => { $refs.component.onFieldBlur() }"></a-input>
                            </a-form-model-item>
                            <a-form-model-item ref="name" label="唯一标识" prop="name" >
                              <a-input
                                :disabled="disableSubmit"
                                v-model="addForm.name"
                                @blur="() => { $refs.name.onFieldBlur() }"></a-input>
                            </a-form-model-item>
                            <a-form-model-item
                              :labelCol="labelCol"
                              :wrapperCol="wrapperCol"
                              label="菜单图标"
                              ref="icon"
                              prop="icon">
                              <a-input placeholder="点击选择图标" :disabled="disableSubmit" v-model="addForm.icon" >
                                <a-icon slot="addonAfter" type="setting" @click="selectIcons" />
                              </a-input>
                            </a-form-model-item>
                            <a-form-model-item
                              :labelCol="labelCol"
                              :wrapperCol="wrapperCol"
                              ref="target"
                              label="链接位置"
                              prop="target">
                              <a-select v-model="addForm.target" :disabled="disableSubmit" placeholder="请选择位置" >
                                <a-select-option value="_blank">_blank</a-select-option>
                                <a-select-option value="_self">_self</a-select-option>
                                <a-select-option value="_parent">_parent</a-select-option>
                                <a-select-option value="_top">_top</a-select-option>
                                <a-select-option value="framename">framename</a-select-option>
                              </a-select>
                            </a-form-model-item>
                            <a-form-model-item
                              label="上级菜单"
                              :labelCol="labelCol"
                              :wrapperCol="wrapperCol"
                              :hasFeedback="true"
                            >
                              <a-tree-select
                                style="width:100%"
                                :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
                                :treeData="dataSource"
                                v-model="addForm.parentId"
                                placeholder="请选择父级菜单"
                                :disabled="disableSubmit">
                              </a-tree-select>
                            </a-form-model-item>
                            <a-form-model-item label="权重" prop="weight" >
                              <a-input :disabled="disableSubmit" v-model="addForm.weight" type="text" oninput="value=value.replace(/[^\d]/g,'')"/>
                            </a-form-model-item>
                            <a-form-model-item label="备注" prop="bz" >
                              <a-input :disabled="disableSubmit" v-model="addForm.bz" type="text"/>
                            </a-form-model-item>
                            <a-form-model-item
                              :labelCol="labelCol"
                              :wrapperCol="wrapperCol"
                              ref="isValid"
                              label="是否显示"
                              prop="isValid">
                              <a-select v-model="addForm.isValid" placeholder="请选择是否显示" :disabled="disableSubmit">
                                <a-select-option value="1">是</a-select-option>
                                <a-select-option value="0">否</a-select-option>
                              </a-select>
                            </a-form-model-item>
                            <!-- 选择图标 -->
                            <icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
                          </a-form-model>
                        </div>
                        <div
                          :style="{
                            position: 'absolute',
                            right: 0,
                            bottom: 0,
                            width: '100%',
                            borderTop: '1px solid #e9e9e9',
                            padding: '10px 16px',
                            background: '#fff',
                            textAlign: 'right',
                            zIndex: 1,
                          }"
                        >
                          <a-button :style="{ marginRight: '8px' }" @click="onClose">
                            关闭
                          </a-button>
                        </div>
                      </a-drawer>
                    </a-menu-item>
                    <a-menu-item>
                      <a href="javascript:;" @click="handleAddSub(record)">添加下级</a>
                    </a-menu-item>

                    <a-menu-item>
                      <a-popconfirm title="确定删除吗?" @confirm="() => onDel(record.menuId)">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </span>
              <!-- 字符串超长截取省略号显示 -->
              <span slot="url" slot-scope="text">
                <j-ellipsis :value="text" :length="25"/>
              </span>
              <!-- 字符串超长截取省略号显示-->
              <span slot="menuName" slot-scope="text">
                <j-ellipsis :value="text"/>
              </span>
            </a-table>
          </template>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script>
  import { getTableData, saveResourceInfo, deleteResourceInfo } from '@/api/menu'
  import Icons from './icon/Icons'

  export default {
    name: 'Organ',
    components: { Icons },
    data () {
      return {
        columns: [
          {
            title: '菜单名称',
            dataIndex: 'menuName',
            key: 'menuName',
            width: '20%',
            align: 'left'
          },
          {
            title: '图标',
            dataIndex: 'icon',
            key: 'icon',
            width: '10%',
            align: 'center'
          },
          {
            title: '父级菜单',
            dataIndex: 'parentName',
            width: '15%',
            key: 'parentName',
            align: 'center'
          },
          {
            title: '前端组件',
            dataIndex: 'component',
            width: '10%',
            key: 'component',
            align: 'center'
          },
          {
            title: '菜单路径',
            dataIndex: 'url',
            width: '20%',
            key: 'url',
            align: 'center'
          },
          {
            title: '权重',
            dataIndex: 'weight',
            width: '10%',
            key: 'weight',
            align: 'center'
          },
          {
            title: '操作',
            dataIndex: 'action',
            key: 'menuId',
            scopedSlots: { customRender: 'action' },
            align: 'center',
            width: 150
          }
        ],
        dataSource: [],
        loading: false,
        menuVisible: false,
        confirmLoading: false,
        visible: false,
        disableSubmit: false,
        DetailsVisible: true,
        iconChooseVisible: false,
        disable: true,
        itemStyle: 'float: left;width: 50%;min-width:300px',
        model: {},
        // 右侧model
        wrapperCol: { span: 16 },
        labelCol: { span: 6 },
        addForm: {
          menuId: null,
          menuName: '',
          name: '',
          target: '',
          component: '',
          url: '',
          icon: '',
          parentId: null,
          bz: '',
          weight: null,
          isValid: '1'
        },
        addRules: {
          menuName: [
            { required: true, message: '请输入菜单名称!', trigger: 'blur' }
          ],
          url: [
            { required: true, message: '请输入菜单路径!', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入唯一标识!', trigger: 'blur' }
          ],
          component: [
            { required: true, message: '请选择前端组件!', trigger: 'blur' }
          ],
          isValid: [
            { required: true, message: '请选择是否显示!', trigger: 'blur' }
          ]
        }
      }
    },
    watch: {
      checkedKeys (val) {
        console.log('onCheck', val)
      }
    },
    created () {
      this.onQuery()
    },
    methods: {
      onQuery () {
        this.loading = true
        getTableData().then(res => {
          console.log(res)
          this.dataSource = res.retObj
          this.loading = false
        })
      },
      handleEdit (record) {
        this.DetailsVisible = true
        this.addForm = Object.assign({}, record)
        this.disableSubmit = false
        this.visible = true
      },
      handleDetail (record) {
        this.menuVisible = true
        this.addForm = Object.assign({}, record)
        this.disableSubmit = true
      },
      showModal () {
        this.DetailsVisible = true
        this.addForm.menuId = null
        this.addForm.menuName = ''
        this.addForm.name = ''
        this.addForm.url = ''
        this.addForm.target = ''
        this.addForm.component = ''
        this.addForm.icon = ''
        this.addForm.parentId = null
        this.addForm.bz = ''
        this.addForm.weight = null
        this.disableSubmit = false
        this.visible = true
      },
      handleOk () {
        if (this.disableSubmit) {
          this.visible = false
        } else {
          this.onSave()
        }
      },
      handleAddSub (record) {
        this.DetailsVisible = true
        this.addForm.menuId = null
        this.addForm.menuName = ''
        this.addForm.name = ''
        this.addForm.url = ''
        this.addForm.icon = ''
        this.addForm.bz = ''
        this.addForm.target = ''
        this.addForm.component = ''
        this.addForm.weight = null
        this.addForm.parentId = Object.assign({}, record).menuId
        this.disableSubmit = false
        this.visible = true
      },
      handleCancel () {
        console.log('Clicked cancel button')
        this.visible = false
      },
      onClose () {
        this.menuVisible = false
      },
      selectIcons () {
        this.iconChooseVisible = true
      },
      handleIconCancel () {
        this.iconChooseVisible = false
      },
      handleIconChoose (value) {
        console.log(value)
        this.addForm.icon = value
        this.iconChooseVisible = false
      },
      onSave () {
        this.$refs.ruleAddForm.validate(valid => {
          if (valid) {
            saveResourceInfo(this.addForm).then(res => {
              if (res.retCode === 0) {
                this.$notification['success']({
                  message: '提示',
                  description: '菜单信息保存成功！',
                  duration: 8
                })
                this.visible = false
                this.onQuery()
              } else {
                this.$notification['error']({
                  message: '提示',
                  description: res.retMsg,
                  duration: 8
                })
              }
            })
          } else {
            return false
          }
        })
      },
      onDel (menuId) {
        deleteResourceInfo({ 'menuId': menuId }).then(res => {
          if (res.retCode === 0) {
            this.$notification['success']({
              message: '提示',
              description: '删除成功！',
              duration: 8
            })
            this.onQuery()
          } else {
            this.$notification['error']({
              message: '提示',
              description: res.retMsg,
              duration: 8
            })
          }
        })
      }
    }
  }
</script>

<style scoped lang="less" >
  .send-display-container {
    width: 100%;
    background-color: #ffffff;
    padding: 24px;
  }

  .filter-container {
    display: flex;
    align-items: center;
    padding-bottom: 24px;
    justify-content: left;

    .label {
      padding-right: 20px;

      white-space: nowrap;
    }

    .input-container {
      width: 300px;
      margin-right: 20px
    }

    .btn {
      margin-right: 20px;
    }
  }
  /deep/ .ant-modal {
    min-width: 700px;
    margin-left: 30%;
  }
</style>
